import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/checkpoint/checkpoint_rank_dialog.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/checkpoint/stages.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_eve_plugin/utils/toast_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointRankItemWidget extends StatelessWidget {
  final int index;

  const CheckpointRankItemWidget({Key key, this.index}) : super(key: key);

  List<Widget> createStarsBg(int bgCount) {
    return List.generate(bgCount, (index) {
      return Image.asset(
        imageUtilYeXiu('checkpoint/icon_stars_bg@3x'),
        width: setRatio(20),
        height: setRatio(20),
      );
    }).toList();
  }

  List<Widget> createStars(int grade, String level) {
    var starCount = 0;
    switch (grade) {
      case 0:
        starCount = 0;
        break;
      case 10:
        starCount = 2;
        break;
      case 20:
        starCount = 3;
        break;
      case 30:
        starCount = 4;
        break;
      case 40:
        starCount = 5;
        break;
      default:
        starCount = 0;
        break;
    }
    return List.generate(starCount, (index) {
      return Image.asset(
        imageUtilYeXiu('checkpoint/icon_stars_$level@3x'),
        width: setRatio(20),
        height: setRatio(20),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(state: store.state);
    }, builder: (context, vm) {
      var stages = vm.state.yeXiuState.checkpointState.checkpointStages;
      var dungeonVitality = vm.state.yeXiuState.checkpointState.dungeonVitality;
      var item = stages?.stageList[index];
      return GestureDetector(
        onTap: () {
          if (item?.usrInfo?.unlocked ?? false) {
            if ((item?.usrInfo?.leftNum ?? 0) <= 0) {
              Toast.showYX(context, '今日次数不足');
            } else if ((dungeonVitality?.currVitality ?? 0) <= 0) {
              Toast.showYX(context, '活力不足');
            } else {
              showAlertDialog(context, item?.configInfo?.stageId ?? '', item);
            }
          } else {
            Toast.showYX(context, '请通关上一个关卡');
          }
        },
        child: Stack(
          children: <Widget>[
            Opacity(
              opacity: 0.7,
              child: Container(
                width: setRatio(301),
                height: setRatio(79),
                decoration: BoxDecoration(
                    border: Border.all(
                        color: Color(0xFFC1C4C9), width: setRatio(1)),
                    borderRadius: BorderRadius.circular(setRatio(5)),
                    gradient: LinearGradient(
                        colors: [Color(0x90505761), Color(0x70747E8B)],
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter),
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(stages?.dungeonPic ?? ''))),
              ),
            ),
            Container(
              width: setRatio(301),
              height: setRatio(79),
              child: Padding(
                padding:
                    EdgeInsets.only(left: setRatio(21), right: setRatio(12)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        SizedBox(
                          child: Text(
                            item?.configInfo?.bossname ?? '',
                            style: TextStyle(
                                fontFamily: FontFamily.PMZD,
                                fontSize: setTextSp(22),
                                color: Color(0xFFFFFFFF)),
                            overflow: TextOverflow.ellipsis,
                          ),
                          width: setRatio(110),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            (stages?.isVIP ?? 0) > 0
                                ? Image.asset(
                                    imageUtilYeXiu(
                                        'checkpoint/icon_checkpoint_vip@3x'),
                                    width: setRatio(35),
                                    height: setRatio(25),
                                  )
                                : Container(),
                            Text.rich(TextSpan(
                                style: TextStyle(
                                    fontFamily: FontFamily.PINGFANG,
                                    fontWeight: FontWeightCustom.PF_Medium,
                                    fontSize: setTextSp(12),
                                    color: Color(0xFFFFFFFF)),
                                children: [
                                  TextSpan(text: '每日次数: '),
                                  TextSpan(
                                      text: '${item?.usrInfo?.leftNum ?? 0}',
                                      style: buildTextStyle(item, stages)),
                                  TextSpan(
                                      text:
                                          '/${(stages?.isVIP ?? 0) > 0 ? (item?.configInfo?.vipnum ?? 0) : (item?.configInfo?.dailynum ?? 0)}'),
                                ]))
                          ],
                        )
                      ],
                    ),
                    Expanded(
                      child: Container(),
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        buildLevelImage(item).length <= 0
                            ? Text(
                                '未通关',
                                style: TextStyle(
                                    color: Color(0xFFEFF0F8),
                                    fontFamily: FontFamily.PINGFANG,
                                    fontWeight: FontWeightCustom.PF_Medium,
                                    fontSize: setTextSp(15)),
                              )
                            : Image.asset(
                                imageUtilYeXiu(buildLevelImage(item)),
                                width: setRatio(30),
                                height: setRatio(30),
                              ),
                        Stack(
                          children: <Widget>[
                            Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: createStarsBg(5)),
                            Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: createStars(
                                    item?.usrInfo?.stageGrade?.grade ?? 0,
                                    buildLevelChar(item)))
                          ],
                        )
                      ],
                    ),
                    SizedBox(
                      width: setRatio(10),
                    ),
                    Image.asset(
                      imageUtilYeXiu(
                          'checkpoint/icon_checkpoint_right_arrow@3x'),
                      width: setRatio(14),
                      height: setRatio(14),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      );
    });
  }

  //0 -- 未通关 10 -- C级 20 -- B级 30 -- A级 40 -- S级
  String buildLevelImage(CheckpointStageList item) {
    switch (item?.usrInfo?.stageGrade?.grade ?? 0) {
      case 0:
        return '';
      case 10:
        return 'checkpoint/icon_level_c@3x';
      case 20:
        return 'checkpoint/icon_level_b@3x';
      case 30:
        return 'checkpoint/icon_level_a@3x';
      case 40:
        return 'checkpoint/icon_level_s@3x';
      default:
        return '';
    }
  }

  //0 -- 未通关 10 -- C级 20 -- B级 30 -- A级 40 -- S级
  String buildLevelChar(CheckpointStageList item) {
    switch (item?.usrInfo?.stageGrade?.grade ?? 0) {
      case 0:
        return '';
      case 10:
        return 'c';
      case 20:
        return 'b';
      case 30:
        return 'a';
      case 40:
        return 's';
      default:
        return '';
    }
  }

  TextStyle buildTextStyle(CheckpointStageList item, CheckpointStages stages) {
    if ((item?.usrInfo?.leftNum ?? 0) == 0) {
      return TextStyle(color: Color(0xFFFF4C4C));
    } else if ((stages?.isVIP ?? 0) > 0) {
      //会员
      if ((item?.usrInfo?.leftNum ?? 0) < (item?.configInfo?.vipnum ?? 0)) {
        return TextStyle(color: Color(0xFFFFBF13));
      }
    } else if ((stages?.isVIP ?? 0) <= 0) {
      //非会员
      if ((item?.usrInfo?.leftNum ?? 0) < (item?.configInfo?.dailynum ?? 0)) {
        return TextStyle(color: Color(0xFFFFBF13));
      }
    }
    return TextStyle(color: Color(0xFFFFFFFF));
  }

  void showAlertDialog(
      BuildContext context, String stageId, CheckpointStageList item) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return CheckpointRankDialog(
          stageId: stageId,
          item: item,
        );
      },
    );
  }
}
